<script setup lang="ts">
import primaryTable from '@/components/Echart/Table/primaryTable.vue'
import primaryTableIndex from '@/components/Echart/Table/primaryTableIndex.vue'
import TableEx from './TableEx.vue'

import { storeToRefs } from 'pinia'
import { watch, ref, onMounted } from 'vue'
import { useHomeStore } from '@/stores/module/home'
const homeStore = useHomeStore() // 创建store实例
const { homeTableCoreDealers } = storeToRefs(homeStore)

const dialogTableVisible = ref(false)

watch(
  () => homeTableCoreDealers.value,
  (val) => {
    homeTableCoreDealers.value = val
  }
)
</script>
<template>
  <!-- <el-carousel-item>
    <Carousel class="carousel-hx" :interval="5000" direction="vertical">
      <el-carousel-item>
        <card-box>
          <template v-slot:title>
            <h1>
              {{ homeTableCoreDealers.title }}
              <el-button
                @click="dialogTableVisible = true"
                class="el-btn"
                size="small"
                type="primary"
                v-if="homeTableCoreDealers.info.length > 2"
              >
                {{ $t('bi_front_distributorseemore') }}
              </el-button>
            </h1>
          </template>
          <primaryTable
            class="title"
            v-if="homeTableCoreDealers.info.length > 0"
          />
        </card-box>
      </el-carousel-item>
      <el-carousel-item v-if="homeTableCoreDealers.info.length > 1">
        <card-box>
          <template v-slot:title>
            <h1>
              {{ homeTableCoreDealers.title }}
              <el-button
                @click="dialogTableVisible = true"
                class="el-btn"
                size="small"
                type="primary"
                v-if="homeTableCoreDealers.info.length > 2"
              >
                {{ $t('bi_front_distributorseemore') }}
              </el-button>
            </h1>
          </template>
          <primaryTableIndex class="title" />
        </card-box>
      </el-carousel-item>
    </Carousel>
  </el-carousel-item> -->
  <card-box>
    <template v-slot:title>
      <h1>
        {{ homeTableCoreDealers.title }}
        <el-button
          @click="dialogTableVisible = true"
          class="el-btn"
          size="small"
          type="primary"
          v-if="homeTableCoreDealers?.info?.length > 1"
        >
          {{ $t('bi_front_distributorseemore') }}
        </el-button>
      </h1>
    </template>
    <primaryTable class="title" v-if="homeTableCoreDealers?.info?.length" />
    <div v-else class="default-img">
      <p>{{ $t('bi_common_nodata') }}</p>
    </div>
  </card-box>
  <el-dialog
    v-model="dialogTableVisible"
    class="transactionData"
    style="background-color: rgba(10, 22, 103, 0.5)"
  >
    <TableEx />
  </el-dialog>
</template>

<style lang="scss" scoped>
.default-img {
  width: 100%;
  text-align: center;
  padding: 120px 0;
  background-image: url('@/assets/images/canvsimage/default.png');
  background-repeat: no-repeat;
  background-position: center;

  font-size: 16px;
  color: #00f6ff;
}
.title {
  cursor: pointer;
}
.el-btn {
  float: right;
  margin-top: 5px;
  background-color: rgba(11, 69, 202, 0.5);
}
</style>

<style>
.dialog-fade-enter-active .el-dialog.transactionData {
  animation: tilt-in-left 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@keyframes tilt-in-left {
  0% {
    -webkit-transform: rotateX(-30deg) translateX(-300px) skewX(-30deg);
    transform: rotateX(-30deg) translateX(-300px) skewX(-30deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0deg) translateX(0) skewX(0deg);
    transform: rotateX(0deg) translateX(0) skewX(0deg);
    opacity: 1;
  }
}
</style>
